<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" width="800px" :close-on-click-modal="false" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="快递单号" prop="tracking_number">
						<el-input v-model="form.tracking_number" placeholder="请输入快递单号"></el-input>
					</el-form-item>
					<el-form-item label="接收时间" prop="back_time">
						<el-date-picker
							style="width: 100%;"
							v-model="form.back_time"
							type="datetime"
							placeholder="请选择接收时间"
							default-time="12:00:00">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入备注"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { prototypeIdBack } from '@/api/user'
export default {
	data () {
		return {
			form:{},
			dialogFormVisible:false,
			title:'寄回',
			rules:{
				tracking_number: [
					{max: 40, message: '快递单号不能超过40个字符', trigger: 'blur'},
					{ required: true, message: '请输入快递单号', trigger: 'blur' }
				],
				back_time: [
					{ required: true, message: '请选择接收时间', trigger: 'blur' }
				],
				remark:[
					{max: 200, message: '备注不能超过200个字符', trigger: 'blur'},
				]
			},
		}
	},
	methods:{
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					let data = this.form
					prototypeIdBack(data,this.id).then(res => {
						if(res.status == 'success'){
							this.dialogFormVisible = false
							this.form = {}
							this.$parent.initTable()
							this.$message.success(res.message)
						}else {
							this.dialogFormVisible = false
							this.form = {}
							this.$parent.initTable()
							this.$message.error(res.message)
						}
						console.log(res)
					})
				}
			})
		},
		initData(data){
			this.id = data.id
			console.log(this.id)
		}
	}
}
</script>
